import React, { useState } from 'react';
import { Form, Input, Button, Alert } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { registerUser } from '../../services/authService'; // 引入服务层方法
import './RegisterForm.css'; // 引入CSS文件

const RegisterForm = () => {
    const [error, setError] = useState('');
    const [success, setSuccess] = useState(''); // 用于存储成功提示信息
    const [loading, setLoading] = useState(false); // 用于控制按钮的加载状态

    const handleRegister = async (values) => {
        // 清除之前的错误和成功信息
        setError('');
        setSuccess('');
        setLoading(true); // 开始请求时，设置加载状态
        try {
            await registerUser(values); // 使用服务层方法进行注册
            setSuccess('注册成功！');
        } catch (err) {
            setError(err.message || '网络错误，请检查您的网络连接。');
        } finally {
            setLoading(false); // 请求结束后，解除加载状态
        }
    };

    return (
        <Form name="register" layout="vertical" onFinish={handleRegister}>
            {error && (
                <Alert
                    message={error}
                    type="error"
                    showIcon
                    closable
                    onClose={() => setError('')}
                    style={{ marginBottom: 16 }}
                    className="fade-in-alert" // 添加一个CSS类，用于动画效果
                />
            )}
            {success && (
                <Alert
                    message={success}
                    type="success"
                    showIcon
                    closable
                    onClose={() => setSuccess('')}
                    style={{ marginBottom: 16 }}
                    className="fade-in-alert" // 添加一个CSS类，用于动画效果
                />
            )}
            <Form.Item
                label="用户名"
                name="username"
                rules={[
                    { required: true, message: '请输入用户名!' },
                    { min: 3, max: 20, message: '用户名长度为 3-20 个字符' },
                    {
                        pattern: /^[a-zA-Z0-9]+$/,
                        message: '用户名只能包含数字和英文字符',
                    },
                ]}
            >
                <Input
                    prefix={<UserOutlined />}
                    placeholder="请输入用户名"
                    size="large"
                />
            </Form.Item>
            <Form.Item
                label="密码"
                name="password"
                rules={[
                    { required: true, message: '请输入密码!' },
                    { min: 6, max: 15, message: '密码长度为 6-15 个字符' },
                    {
                        pattern: /^[a-zA-Z0-9!@#$%^&*()_+[\]{};':"\\|,.<>/?-]+$/,
                        message: '密码只能包含数字、英文字符或特殊字符',
                    },
                ]}
            >
                <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="请输入密码"
                    size="large"
                />
            </Form.Item>
            <Form.Item
                label="确认密码"
                name="confirm"
                dependencies={['password']}
                rules={[
                    { required: true, message: '请确认密码!' },
                    ({ getFieldValue }) => ({
                        validator(_, value) {
                            if (!value || getFieldValue('password') === value) {
                                return Promise.resolve();
                            }
                            return Promise.reject(new Error('两次输入的密码不匹配!'));
                        },
                    }),
                ]}
            >
                <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="请确认密码"
                    size="large"
                />
            </Form.Item>
            <Form.Item>
                <Button
                    type="primary"
                    htmlType="submit"
                    block
                    size="large"
                    loading={loading} // 使用加载状态
                >
                    注册
                </Button>
            </Form.Item>
        </Form>
    );
};

export default RegisterForm;
